<template>
    <view class="select-with-popup">
        <!-- <u-cell-item :value="showLabel || placeholder" :arrow="true" @click="show = true"></u-cell-item> -->
        <view class="custom-input" style="margin-right: 24rpx" @click="show = true">{{showLabel || placeholder}}</view>
        <u-popup v-model="show" mode="center" width="100%" height="100%" closeable close-icon-color="#fff">
            <view class="select-with-popup-title">选择用户</view>
            <view class="select-with-popup-content">
                <view class="search">
                    <search @search="handlerSearch" />
                </view>
                <view class="user-list">
                    <list :loadData="loadData" :defaultSearch="searchForm">
                        <template #default="{scope}">
                            <view class="roster-item" @click="hanlderClick(scope)">
                                <view class="user-name" :class="selectData.userId == scope.userId ? 'active' : ''">
                                    <view class="user-icon">
                                        <u-icon name="account-fill" color="#fff" size="32"></u-icon>
                                    </view>
                                    <view class="name">
                                        <view>{{scope.nickName}}</view>
                                        <view>{{scope.deptName}}</view>
                                    </view>
                                </view>
                            </view>
                        </template>
                    </list>
                </view>
            </view>
            <view class="select-with-popup-footer">
                <u-button type="primary" @click="confirm">确定</u-button>
            </view>
        </u-popup>
    </view>
</template>
<script lang="ts" setup>
import { ref,defineProps, defineEmits, computed, watchEffect } from 'vue'
interface DefaultProps {
    label: string,
    value: string
}
const props = defineProps({
    data: {
        type: Object
    },
    placeholder: {
        type: String,
        default: '请选择'
    },
    loadData: {
        type: Function
    },
    showName: {
        type: String,
        default: 'label'
    },
})
const emit = defineEmits(['update:data'])
const show = ref(false)
const selectData = ref({})
const searchForm = ref({
    fuzzyField: ''
})
const handlerSearch = (val:any) => {
    console.log(val)
    searchForm.value.fuzzyField = val.keyword
}
watchEffect(() => {
    selectData.value = props.data || {}
})
const showLabel = computed(() => {
    return selectData.value[props.showName]
})
const hanlderClick = (data) => {
    selectData.value = data
}
const confirm = () => {
    emit('update:data', selectData.value)
    show.value = false
}
</script>
<style lang="scss">
.select-with-popup{
     .user-name{
        display: flex;
        padding: 24rpx;
        background: #f3f3f3;
        background: #fff;
        align-items: center;
        &.active{
            background: #cde4f1;
        }
        > view {
            display: inline-block;
            line-height: 60rpx;
        }
        .user-icon{
            width: 60rpx;
            height: 60rpx;
            border-radius: 12rpx;
            vertical-align: middle;
            background: #2979ff;
            color: #fff;
            font-size: 24rpx;
            text-align: center;
            margin-right: 16rpx;
        }
        .name{
            flex: 1;
            font-size: 28rpx;
            line-height: 1.4;
        }
    }
    .roster-item{
        border-top: 1px solid #dcdcdc;
    }
    .select-with-popup-title{
        background: #2979ff;
        color: #fff;
        padding: 24rpx;
        height: 90rpx;
    }
    .select-with-popup-content{
        background: #f3f3f3;
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        height: calc(100% - 170rpx);
        .user-list{
            flex: 1;
            height: calc(100% - 100rpx);
        }
    }
    .search{
        margin: 24rpx;
        width: 100%;
    }
}
</style>